import {ChangeEvent, FormEvent, useState} from 'react';
interface FromData{
    username?:string,
    password?:string,
}
function IFrom(){
    const [state,setState]=useState<FromData>({});
    const submit= (event:FormEvent<HTMLFormElement>)=>{
        event.preventDefault();
        // console.log(state);
        alert(state?.username);
    }
    function onChangeFromData<K extends keyof FromData>(fieldName:K){
        return (event:ChangeEvent<HTMLInputElement>) =>{
            let fromData:FromData=state;
            fromData[fieldName]=event.target.value;
            // setState({[fieldName]:event.target?.value});
            setState(fromData);
            // console.log({[fieldName]:event.target.value});            
        }
    }
    return (
        <div>
            <form onSubmit={submit}>
                <input type="text" name="username" onChange={onChangeFromData('username')}/>
                <input type="password" name="password" onChange={onChangeFromData('password')}/>
                {/* <input type="submit" value="Submit" onClick={submit}/> */}
                <button>登录</button>
            </form>
        </div>
    );
}
export default IFrom;